<template>
  <div class="dashboard-editor-container">
    <panel-group />

    <el-row style="border-radius:5px;background-color:#fff; margin-bottom: 32px">
      <div class="chart-main">
        <line-chart :chart-data="lineChartData" />
      </div>
    </el-row>

    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <raddar-chart />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <pie-chart :chart-data="pieChartData" />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <bar-chart :chart-data="barChartData" />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { fetchRecentnum, fetchStandtpyenum, getLastWeekInfo } from '@/api/home'

import PanelGroup from './components/PanelGroup'
import LineChart from './components/LineChart'
import RaddarChart from './components/RaddarChart'
import PieChart from './components/PieChart'
import BarChart from './components/BarChart'

// import axios from 'axios'

export default {
  name: 'DashboardAdmin',
  components: {
    PanelGroup,
    LineChart,
    RaddarChart,
    PieChart,
    BarChart
  },
  data() {
    return {
      // 直线所需数据
      lineChartData: {
        daystandnum: null,
        nowrepnum: null,
        nowstandnum: null,
        maxstandnum: null,
        week: [1, 2, 3, 4, 5, 6, 7]
      },

      // 今日摆摊总数
      daystandnum: [],
      // 今日违规总数
      nowrepnum: [],
      // 当前摆摊人数
      nowstandnum: [],
      // 最密集区域总数
      maxstandnum: [],
      week: [],
      // 加载栏目
      listLoading: false,
      // 饼所需数数据
      pieChartData: {
        name: [],
        totalData: []
      },
      chartList: null,
      barChartData: {
        name: [],
        barData: {
          street2: [],
          street3: [],
          street4: [],
          street5: [],
          street6: [],
          street7: [],
          street1: []
        }
      }
    }
  },
  created() {
    this.getRecentNum()
    this.getPieList()
    this.getBarChart()
  },
  methods: {
    getRecentNum() {
      this.listLoading = true
      fetchRecentnum().then((response) => {
        for (const i in response.data) {
          this.daystandnum[i] = response.data[i].daystandnum
          this.nowrepnum[i] = response.data[i].nowrepnum
          this.nowstandnum[i] = response.data[i].nowstandnum
          this.maxstandnum[i] = response.data[i].maxstandnum
          this.week[i] = response.data[i].day
        }

        this.lineChartData.daystandnum = this.daystandnum
        this.lineChartData.nowrepnum = this.nowrepnum
        this.lineChartData.nowstandnum = this.nowstandnum
        this.lineChartData.maxstandnum = this.maxstandnum
        this.lineChartData.week = this.week
        // Just to simulate the time of the request
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
    },
    getPieList() {
      this.listLoading = true
      fetchStandtpyenum().then((response) => {
        for (const i in response.data) {
          this.pieChartData.name[i] = response.data[i].name
          this.pieChartData.totalData = response.data
        }
        // Just to simulate the time of the request
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
    },
    getBarChart() {
      this.listLoading = true
      getLastWeekInfo().then((response) => {
        this.chartList = response.data
        for (const i in response.data) {
          this.barChartData.name[i] = response.data[i].street
        }
        this.barChartData.barData.street1 = response.data[0].num.slice(1, 7)
        this.barChartData.barData.street1.push(response.data[0].num[0])
        this.barChartData.barData.street2 = response.data[1].num.slice(1, 7)
        this.barChartData.barData.street2.push(response.data[1].num[0])
        this.barChartData.barData.street3 = response.data[2].num.slice(1, 7)
        this.barChartData.barData.street3.push(response.data[2].num[0])
        this.barChartData.barData.street4 = response.data[3].num.slice(1, 7)
        this.barChartData.barData.street4.push(response.data[3].num[0])
        this.barChartData.barData.street5 = response.data[4].num.slice(1, 7)
        this.barChartData.barData.street5.push(response.data[4].num[0])
        this.barChartData.barData.street6 = response.data[5].num.slice(1, 7)
        this.barChartData.barData.street6.push(response.data[5].num[0])
        this.barChartData.barData.street7 = response.data[6].num.slice(1, 7)
        this.barChartData.barData.street7.push(response.data[6].num[0])
        this.barChartData.barData.street8 = response.data[7].num.slice(1, 7)
        this.barChartData.barData.street8.push(response.data[7].num[0])
        // Just to simulate the time of the request
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.chart-main {
  height: 100%;
  width: 100%;
  border-radius: 5px;
  box-shadow: 0.1em 0.1em 0.3em rgb(59, 59, 59);
}
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .github-corner {
    position: absolute;
    top: 0px;
    border: 0;
    right: 0;
  }

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
    border-radius: 5px;
    box-shadow: 0.1em 0.1em 0.3em rgb(59, 59, 59);
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
